
import Map from 'ol/Map.js';
import ol from "ol/index";
import View from 'ol/View.js';
import { applyTransform } from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import { get as getProjection, getTransform } from 'ol/proj.js';
import { register } from 'ol/proj/proj4.js';
import OSM from 'ol/source/OSM.js';
import TileImage from 'ol/source/TileImage.js';
import proj4 from 'proj4';
import 'ol/ol.css';
import "./index.css";
import { walkUpBindingElementsAndPatterns } from 'typescript';

var config = {
    mapId: "map",
    projCode: "EPSG:4490",
    projDefs: "+proj=longlat +ellps=GRS80 +no_defs",
    center: [0, 0],
    extent: [-180, -90, 180, 90],
}

proj4.defs(config.projCode, config.projDefs);
register(proj4);

var myProjection = getProjection(config.projCode);

var wgs84ToMyProjection = getTransform("EPSG:4326", myProjection);

var myExtent = applyTransform(config.extent, wgs84ToMyProjection);

myProjection.setExtent(myExtent);


var map = new Map({
    view: new View({
        center: config.center,
        zoom: 1,
        projection: config.projCode
    }),
    target: document.getElementById(config.mapId),
    layers: [
        new TileLayer({
            source: new XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}",
                projection: "EPSG:4490",
            })
        }),
        new TileLayer({
            source: new XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}",
                projection: "EPSG:4490",
            })
        }),
        new TileLayer({
            source: new OSM()
        })

    ]
});

map.getView().fit(myExtent);
var switchToWebMercator = () => {

    map.setView(new View({
        projection: "EPSG:3857",
        center: [0, 0],
        zoom: 1,
    }))
}

window.switchToWebMercator = switchToWebMercator;
window.ol = ol;
window.proj4 = proj4;
window.map = map;
window.config = config;